$(function () {
    // 1 拿到 搜索页面传递过来关键字的值
    // 2  根据这个值进行ajax请求
    // 3 传递请求的参数 最少需要三个
    //  1 page |是|第几页
    //  2 pageSize |是|每页的条数
    //  3 传递关键字的值
    // 4 成功吧数据展示在页面上


    // 1 拿到 搜索页面传递过来关键字的值
    var url = window.location.href;
    console.log(url);
    var index = url.indexOf('?');
    console.log(index);
    var len = url.substring(index + 1);
    console.log(len);
    var arr = len.split('=');
    console.log(arr[1]);


    var pages = 1;
    var pageSizes = 4;
    var keys = arr[1];
    var htmls = '';
    var priceNum = 1; //价格排序
    var that = null;
    var lengNum = 1; // 销量排序
    // $.ajax({
    //     url: '/product/queryProduct',
    //     type: 'get',
    //     data: {
    //         page: pages,
    //         pageSize: pageSizes,
    //         key: keys,
    //     },
    //     success: function (res) {
    //         console.log(res);
    //         var htmls = template('tmp',res)
    //         console.log(htmls);
    //         $('#ulBox').html(htmls);

    //     },
    //     error: function (err) {

    //     }
    // });

    mui.init({
        pullRefresh: {
            container: '#refreshContainer',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up: {
                height: 80,//可选.默认50.触发上拉加载拖动距离
                auto: true,//可选,默认false.自动上拉加载一次
                contentrefresh: "我的乐淘正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '我的乐淘没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: getData//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
        }
    });

    // 1 价格排序  默认的情况是随机排 还是hi从小到大排
    // 1-1 默认情况下给1是升序
    // 2 给按钮绑定点击事件
    // 3 点击后把之前的商品进行情况 再把所有的商品进行价格排序(从高到低或者从低到高)
    // priceSort

    $('#priceSort').on('tap', function () {
        // if (priceNum == 1) { //1为升序
        //     priceNum = 2;
        // } else {
        //     priceNum = 1;
        // }
        priceNum = priceNum == 1 ? 2 : 1;
        lengNum = '';      // 价格排序时清空销量排序
        htmls = '';  //htmls 需要清空
        $('#ulBox').html(''); // 内容也需要清空
        pages = 1;           // pages需要从第一页开始
        getData();
        mui('#refreshContainer').pullRefresh().refresh(true);
        // id 名字需要改成自己的id名
    })

    $('#lengSort').on('tap', function () {
        lengNum = lengNum == 1 ? 2 : 1;
        priceNum = '';      //销量排序时清空价格排序
        htmls = '';  //htmls 需要清空
        $('#ulBox').html(''); // 内容也需要清空
        pages = 1;           // pages需要从第一页开始
        getData();
        mui('#refreshContainer').pullRefresh().refresh(true);
        // id 名字需要改成自己的id名
    })


    function getData() {
        if (!that) {
            that = this;
        }
        $.ajax({
            url: '/product/queryProduct',
            type: 'get',
            data: {
                page: pages++,
                pageSize: pageSizes,
                key: keys,
                price: priceNum,
                num: lengNum,
            },
            success: function (res) {
                console.log(res);
                // 如果加载第二页甚至后面更多页面的数据时,应该要把之前
                // 所有的数据都加载一起,再进行展示


                // 判断下拉加载的时候如果没有数据
                // 那么就不在进行加载更多
                // 而是提示没有数据了

                if (res.data.length > 0) {


                    htmls += template('tmp', res)
                    console.log(htmls);
                    $('#ulBox').html(htmls);
                    //业务逻辑代码，比如通过ajax从服务器获取新数据；
                    //注意：
                    //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
                    //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
                    that.endPullupToRefresh(false); //false表示还有更多数据
                } else {
                    that.endPullupToRefresh(true);
                }
            }

        });


    }



})
